<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <span>欢迎来到东软会议室预定系统</span>
      </div>
      <el-button @click="drawer = true" type="success" icon="el-icon-s-tools"></el-button>  
    </el-header>
    <!-- 抽屉 -->
    <el-drawer
      title="设置"
      :visible.sync="drawer"
      :with-header="false"
      size="10%">
      <div class="drawer-btn">
        <el-button class="pwd" type="success" @click="updPwd">修改密码</el-button>
        <el-button class="logout" type="info" @click="logout">退出</el-button>
      </div>
      
    </el-drawer>

    <!-- 页面主体区域 -->
    <el-menu
      text-color="#000"
      active-text-color="#409eff"
      :unique-opened="true"
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="activePath">
      <el-menu-item border index="/conference" @click="saveNavState('/conference')">预约会议</el-menu-item>
      <el-menu-item border index="/records" @click="saveNavState('/records')">预约记录</el-menu-item>
      <el-menu-item border index="/repair" @click="saveNavState('/repair')">会议室报修</el-menu-item>
      <el-menu-item border v-show="uverify == '1' ? true : false" index="/repaired" @click="saveNavState('/repaired')">报修管理</el-menu-item>
      <el-menu-item border v-show="uverify == '1' ? true : false" index="/rooms" @click="saveNavState('/rooms')">会议室管理</el-menu-item>
      <el-menu-item border v-show="uverify == '1' ? true : false" index="/users" @click="saveNavState('/users')">用户管理</el-menu-item>
    </el-menu>
    <el-container>
      <el-main>
        <!-- 路由占位符 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        uverify: window.sessionStorage.getItem('uverify'),
        isCollapse: false,
        activePath: '',
        drawer: false
      }
    },
    methods: {
      logout(){
        window.sessionStorage.clear();
        this.drawer = false;
        this.$router.push('/login');
      },
      saveNavState(activePath){
        window.sessionStorage.setItem('activePath', activePath);
        this.activePath = activePath;
      },
      updPwd(){
        this.drawer = false;
        this.$router.push('/updPwd');
      }
    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }
  .el-header {
    background-color: #409EFF;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    align-items: center;
    color: #eaedf1;
    font-size: 20px;
    > div {
      display: flex;
      align-items: center;
      span {
        margin-left: 15px;
      }
    }
  }
  .el-menu{
    background-color: Transparent;
    display: flex;
    align-content: center;
    margin: auto;
    border-right: none;

    .el-menu-item{
      border-color: #3b92c7;
      border-radius: 2px;
    }
  }
  .el-main{
    background-color: Transparent;
  }
  .toggle-button {
    background-color: #909399;
    font-size: 10px;
    line-height: 24px;
    color: #eaedf1;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
  .drawer-btn{
    display: flex;
    flex-direction: column;
    .pwd{
      width: 120px;
      height: 50px;
      margin: 20px auto;
    }
    .logout{
      width: 120px;
      height: 50px;
      margin: 0 auto;
    }
  }
</style>